<template>
  <div class="employees">
    <!-- 工具栏 -->
    <pagetools>
      <template #right>
        <el-button type="primary" @click="$router.push('/employees/import')"
          >导入</el-button
        >
        <el-button type="primary" @click="showDailog = true"
          >+ 新增员工</el-button
        >
      </template>
    </pagetools>
    <el-card class="mycard">
      <!-- 表格区域 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          fixed="left"
        ></el-table-column>
        <el-table-column width="150" label="图片">
          <template slot-scope="{ row }">
            <img
              :src="row.staffPhoto"
              alt=""
              v-errimage="require('@/assets/common/bigUserHeader.png')"
              class="staffPhoto"
              @click="isshowdioag(row.staffPhoto)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="180">
        </el-table-column>
        <el-table-column prop="workNumber" label="工号"> </el-table-column>
        <el-table-column label="聘用形式">
          <template slot-scope="{ row }">
            {{ row.formOfEmployment | turnHireType }}
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" label="部门"> </el-table-column>
        <el-table-column width="180" label="入职时间">
          <template slot-scope="{ row }">
            {{ row.timeOfEntry | timeformat }}
          </template>
        </el-table-column>
        <el-table-column label="是否在职">
          <template>在职</template>
        </el-table-column>
        <el-table-column label="状态">
          <template>可用</template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="300" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="text" @click="toDetail(row.id)">查看</el-button>
            <el-button type="text">转正</el-button>
            <el-button type="text">调岗</el-button>
            <el-button type="text">离职</el-button>
            <el-button type="text" @click="openRole(row.id)">角色</el-button>
            <el-button type="text" @click="delEmployee(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="page.pagesizes"
        :page-size="page.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-card>
    <add :showDailog.sync="showDailog" @updatedata="getEmployeeList"></add>
    <!-- 弹框 -->
    <el-dialog title="显示二维码" :visible.sync="dialogTableVisible">
      <canvas ref="myCanvas" class="imgeaer" />
    </el-dialog>
    <!-- 角色弹框 -->
    <el-dialog title="分配角色" :visible.sync="roleDialog">
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{
          item.name
        }}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" style="text-align: center">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="roleDialog = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getEmployeeListapi,
  getuserinfoApi,
  sysuserAssignRolesApi
} from '../../api/employees'
import { getRoleListApi } from '@/api/role'
import QrCode from 'qrcode'
import add from './components/add.vue'
export default {
  components: {
    add
  },
  data () {
    return {
      // 控制新增组件显示隐藏
      showDailog: false,
      tableData: [],
      page: {
        currentPage: 1, // 当前页
        pagesizes: [5, 10, 15, 20], // 页容量集合
        pagesize: 5, // 页容量
        total: 0 // 总数量
      },
      dialogTableVisible: false,
      // 角色弹框显示
      roleDialog: false,
      // 复选框
      checkList: [],
      // 保存角色列表
      roleList: [],
      userId: ''
    }
  },
  methods: {
    // 获取员工列表
    async getEmployeeList () {
      const res = await getEmployeeListapi({
        page: this.page.currentPage,
        size: this.page.pagesize
      })
      // 保存数据
      this.tableData = res.rows
      // 保存数量
      this.page.total = res.total
    },
    // 切换页容量
    handleSizeChange (size) {
      this.page.pagesize = size
      this.getEmployeeList()
    },
    // 切换页码
    handleCurrentChange (page) {
      this.page.currentPage = page
      this.getEmployeeList()
    },
    // 删除员工
    delEmployee (id) {
      console.log(id)
      console.log('删除成功')
    },
    toDetail (id) {
      this.$router.push(`/employees/detail?id=${id}`)
    },
    // 显示弹框显示二维码
    isshowdioag (tupian) {
      this.dialogTableVisible = true
      console.log(tupian)
      setTimeout(() => {
        QrCode.toCanvas(this.$refs.myCanvas, tupian, {
          width: 200,
          height: 200
        })
      }, 500)
    },
    // 显示角色弹框
    async openRole (id) {
      const { rows } = await getRoleListApi()
      this.roleList = rows
      const { roleIds } = await getuserinfoApi(id)
      this.checkList = roleIds
      this.roleDialog = true
      this.userId = id
    },
    async submit () {
      await sysuserAssignRolesApi({ id: this.userId, roleIds: this.checkList })
      this.$message.success('修改角色成功')
      this.roleDialog = false
      this.getEmployeeList()
    }
  },
  created () {
    this.getEmployeeList()
  }
}
</script>

<style lang="scss" scoped>
.employees {
  padding: 20px;
  .mycard {
    margin-top: 20px;
    .el-pagination {
      text-align: right;
      margin-top: 20px;
    }
  }
  .staffPhoto {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }
  .imgeaer {
    display: block;
    margin: 0 auto;
  }
}
</style>
